<template>
	<view class="e-avatar" :class="[`e-avatar--${props.shape}`]" :style="[avatarStyle, addStyle(customStyle)]"
		@tap="clickHandler">
		<slot>
			<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU  -->
			<open-data v-if="props.mpAvatar && allowMp" type="userAvatarUrl" :style="[{
					width: addUnit(size),
					height: addUnit(size)
				}]" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
			<template v-if="props.mpAvatar && allowMp"></template>
			<!-- #endif -->
			<e-icon v-else-if="props.icon" :name="props.icon" :size="props.fontSize" :color="props.color"></e-icon>
			<e-text v-else-if="props.text" :text="props.text" :size="props.fontSize" :color="props.color" align="center"
				customStyle="justify-content: center"></e-text>
			<image class="e-avatar__image" v-else :class="[`e-avatar__image--${props.shape}`]" :src="avatarUrl || props.defaultUrl"
				:mode="props.mode" @error="errorHandler" :style="[{
					width: addUnit(props.size),
					height: addUnit(props.size)
				}]"></image>
		</slot>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * Avatar  头像
	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
	 * @tutorial https://www.uviewui.com/components/avatar.html
	 *
	 * @property {String}			src				头像路径，如加载失败，将会显示默认头像(不能为相对路径)
	 * @property {String}			shape			头像形状  （ circle (默认) | square）
	 * @property {String | Number}	size			头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ）
	 * @property {String}			mode			头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ）
	 * @property {String}			text			用文字替代图片，级别优先于src
	 * @property {String}			bgColor			背景颜色，一般显示文字时用 （默认 '#c0c4cc' ）
	 * @property {String}			color			文字颜色 （默认 '#ffffff' ）
	 * @property {String | Number}	fontSize		文字大小  （默认 18 ）
	 * @property {String}			icon			显示的图标
	 * @property {Boolean}			mpAvatar		显示小程序头像，只对百度，微信，QQ小程序有效  （默认 false ）
	 * @property {Boolean}			randomBgColor	是否使用随机背景色  （默认 false ）
	 * @property {String}			defaultUrl		加载失败的默认头像(组件有内置默认图片)
	 * @property {String | Number}	colorIndex		如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
	 * @property {String}			name			组件标识符  （默认 'level' ）
	 * @property {Object}			customStyle		定义需要用到的外部样式
	 *
	 * @event    {Function}        click       点击组件时触发   index: 用户传递的标识符
	 * @example  <e-avatar :src="src" mode="square"></e-avatar>
	 */
	export default defineComponent({
		name: "e-avatar",
		mixins: [mpMixin],
	})
</script>
<script lang="ts" setup>
	import {
		ref,
		computed,
		watch,
		toRefs
	} from 'vue'
	import {
		avatarProps,
		avatarEmits
	} from './props';
	import {
		colors,
		allowMp,
		base64Avatar
	} from './var';
	import {
		addUnit,
		addStyle
	} from '../../libs/utils/_utils'
	import {
		numberRandom,
		empty
	} from '../../libs/utils'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		avatar: avatarDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(avatarProps)

	const props = useDefaultProps < DefaultProps['avatar'] > (_props, avatarDefaultProps);
	const emit = defineEmits(avatarEmits)

	const avatarUrl = ref(props.value.src)
	const avatarStyle = computed(() => {
		return {
			backgroundColor: (props.value.text || props.value.icon) ? (props.value.randomBgColor ? colors[empty(
					props.value.colorIndex) ?
				numberRandom(0, 19) : props.value.colorIndex as number] : props.value.bgColor) : 'transparent',
			width: addUnit(props.value.size as string),
			height: addUnit(props.value.size as string),
		}
	})

	// const imageStyle = computed(() => {
	// 	const style = {}
	// 	return style
	// })
	// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
	// const isImg = () => {
	// 	return props.value.src.indexOf('/') !== -1
	// }
	// 图片加载时失败时触发
	const errorHandler = () => {
		avatarUrl.value = props.value.defaultUrl || base64Avatar
	}
	const clickHandler = () => {
		emit('click', props.value.name as string)
	}

	// 监听头像src的变化，赋值给内部的avatarUrl变量，因为图片加载失败时，需要修改图片的src为默认值
	watch(() => props.value.src, (val) => {
		avatarUrl.value = val
		// 如果没有传src，则主动触发error事件，用于显示默认的头像，否则src为''空字符等的时候，会无内容展示
		if (!val) {
			errorHandler()
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/avatar.scss";
</style>
